<template>
  <div class="category">
    <el-card>
      <h1>订单列表</h1>
      <!-- 搜索栏 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="grid-content ep-bg-purple" />
          <el-input
            v-model="search"
            clearable
            placeholder="输入用户名、订单id、类型、状态"
            size="large"
          />
        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" />
          <el-button type="primary" class="search">搜索</el-button>
        </el-col>
      </el-row>
      <el-divider> </el-divider>
      <!-- 订单表格 -->
      <el-table
        :data="filterTableData"
        style="width: 100%"
        highlight-current-row
        empty-text
        table-layout="fixed"
        max-height="600"
      >
        <!-- 展开 -->
        <el-table-column type="expand" fixed>
          <template #default="porps">
            <!-- 内容 -->
            <el-descriptions
              title="订单详情"
              border
              style="padding: 20px 50px"
              column="2"
              colspan="4"
            >
              <el-descriptions-item label="订单编号">
                <el-tag>{{
                  porps.row.id || "空"
                }}</el-tag></el-descriptions-item
              >
              <el-descriptions-item label="下单时间">{{
                porps.row.createTime || "空"
              }}</el-descriptions-item>

              <el-descriptions-item label="用户名称">{{
                porps.row.addressUser ? porps.row.addressUser.name : "空"
              }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{
                porps.row.addressUser ? porps.row.addressUser.tel : "空"
              }}</el-descriptions-item>

              <el-descriptions-item label="类别">{{
                porps.row.category || "空"
              }}</el-descriptions-item>
              <el-descriptions-item label="重量">{{
                porps.row.orderHaving || "空"
              }}</el-descriptions-item>

              <el-descriptions-item label="地址">
                <el-tag size="small">{{
                  porps.row.addressUser
                    ? porps.row.addressUser.addressDetail
                    : "空"
                }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="上门时间">{{
                porps.row.appointmentTime || "空"
              }}</el-descriptions-item>

              <el-descriptions-item label="备注">{{
                porps.row.remark || "空"
              }}</el-descriptions-item>
            </el-descriptions>

            <!-- 图片 -->

            <div class="demo-image__preview" style="padding: 10px 50px">
              <h2>图片</h2>
              <el-image
                v-for="(src, index) in srcList"
                :key="index"
                @click="initialIndexClick(index)"
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="src"
                :zoom-rate="1.2"
                :preview-src-list="srcList"
                :initial-index="initialIndex"
                fit="cover"
                lazy
                preview-teleported="true"
                hide-on-click-modal="true"
              />
            </div>
            <!-- 进度条 -->
            <el-steps
              :active="porps.row.ordersStatus"
              align-center
              style="padding: 10px 0; margin-bottom: 20px"
              process-status="wait "
              finish-status="success"
            >
              <el-step title="审核中" description="已下单，审核中" />
              <el-step title="已审核" description="已审核，等待完成订单" />
              <el-step
                v-if="porps.row.ordersStatus == 3"
                title="未通过"
                description="订单被驳回，可能是订单不符合"
                status="error"
              />
              <el-step
                v-if="porps.row.ordersStatus !== 3"
                title="已完成"
                description="订单已完成"
              />
            </el-steps>
          </template>
        </el-table-column>
        <el-table-column fixed prop="id" label="订单编号" width="220">
          <template #default="scope">
            <el-tag>{{ scope.row.id || "空" }}</el-tag>
          </template></el-table-column
        >
        <el-table-column prop="addressUser" label="用户名称">
          <template #default="scope">
            <el-tag>{{
              scope.row.addressUser ? scope.row.addressUser.name : "空"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="addressUser" label="联系电话">
          <template #default="scope">
            {{ scope.row.addressUser ? scope.row.addressUser.tel : "空" }}
          </template>
        </el-table-column>

        <el-table-column prop="category" label="类别">
          <template #default="scope">
            {{ scope.row.category || "空" }}
          </template>
        </el-table-column>

        <el-table-column prop="appointmentTime" label="上门时间">
          <template #default="scope">
            {{ scope.row.appointmentTime || "空" }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="remark" label="备注">
          <template #default="scope">
            {{ scope.row.remark || "空" }}
          </template>
        </el-table-column>
        <el-table-column prop="ordersStatus" label="订单状态">
          <template #default="scope">
            <el-tag
              class="ml-2"
              type="warning"
              v-if="scope.row.ordersStatus === 1"
              >未审核</el-tag
            >
            <el-tag
              class="ml-2"
              type="success"
              v-else-if="scope.row.ordersStatus === 2"
              >已审核</el-tag
            >
            <el-tag
              class="ml-2"
              type="danger"
              v-else-if="scope.row.ordersStatus === 3"
              >未通过</el-tag
            >
            <el-tag
              class="ml-2"
              type="success"
              v-else-if="scope.row.ordersStatus === 4"
              >已完成</el-tag
            >
            <el-tag class="ml-2" type="info" v-else>无</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        :page-size="pageSize"
        :hide-on-single-page="total / pageSize < 1"
        :pager-count="total"
        layout="prev, pager, next,jumper, ->,total"
        :total="total"
        @prev-click="currentChange"
        @next-click="currentChange"
        @current-change="currentChange"
        style="padding-top: 20px"
      />
    </el-card>
  </div>
</template>

<script>
// 订单管理
import { defineComponent, watch } from "vue";
import { computed, ref } from "vue";
import { useStore } from "vuex";
import { ElLoading } from "element-plus";
export default defineComponent({
  name: "categoryList",

  setup() {
    const store = useStore();
    let pageNo = ref(1); //分页
    let pageSize = ref(5);
    let initialIndex = ref(1); //点击预览图片
    let total = computed(() => store.getters["product/getOrderTotal"]);
    const srcList = [
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
      "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
      "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
      "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg"
    ];
    getData();
    //请求
    function getData() {
      store.dispatch("product/getOrderLimit", {
        pageNo: pageNo.value,
        pageSize: pageSize.value
      });
    }
    // 分页监听
    function currentChange(e) {
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      pageNo.value = e;
      getData();
      setTimeout(() => {
        loading.close();
      }, 100);
    }
    // 点击图片预览
    function initialIndexClick(i) {
      initialIndex.value = i;
    }

    // 搜索
    const search = ref("");
    // 检索
    const filterTableData = computed(() =>
      // 用户名、订单id、类型、状态
      computed(() => store.getters["product/getOrderList"]).value.filter(
        (data) =>
          !search.value ||
          String(data.userId)
            .toLowerCase()
            .includes(search.value.toLowerCase()) ||
          String(data.id).toLowerCase().includes(search.value.toLowerCase()) ||
          String(data.category)
            .toLowerCase()
            .includes(search.value.toLowerCase()) ||
          String(
            data.ordersStatus == 1
              ? "未审核"
              : data.ordersStatus == 2
              ? "已审核"
              : data.ordersStatus == 3
              ? "未通过"
              : data.ordersStatus == 4
              ? "已完成"
              : "无"
          ).includes(search.value)
      )
    );

    return {
      filterTableData,
      search,
      pageSize,
      pageNo,
      total,
      srcList,
      initialIndexClick,
      initialIndex,
      currentChange
    };
  }
});
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
}

.search {
  height: 100%;
  padding: 0 30px;
  border-radius: 5px;
}

.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
